import Empty from "@/components/Empty";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import BaseSearchForm from "@/components/SearchForm/BaseSearchForm";
import SearchTypes from "@/components/SearchForm/SearchTypes";
import { useApplet } from "@/hooks/useApplet";
import { useAuthButtonList } from "@/hooks/useAuthButtons";
import { filePrefix } from "@/hooks/useSystem";
import AppletLogo from "@public/images/decoration/topo-bg.jpg";
import { ComponentInternalInstance } from "vue";
import { getAppList } from "../../../api/modules/applet/userApplet";
import "../applet.scss";
import { Applet } from "./../../../api/interface/iot";
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const initParam = reactive<Applet.ReqUserApplet>({ pageSize: 12, name: "", show: true });
		const { gotoAccess, appletTypeList } = useApplet();

		const dataCallback = (data: any) => {
			data.records.map((item: any) => {
				item.status = item.status + "";
				return item;
			});
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current || 1,
				pageSize: data.size
			};
		};

		const getTableList = async (params: any) => {
			return getAppList(params);
		};
		const buttonsList = ref<any>([]);
		const operateList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			let btns = await useAuthButtonList();
			buttonsList.value = btns.filter((item: any) => item.type == "btn");
			operateList.value = btns.filter((item: any) => (item.type = "operate"));
		});
		// 表格配置项
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "name", label: proxy?.$t("dashboard.tablist_label.name"), search: { el: "input" } },
			{ prop: "descript", label: proxy?.$t("dashboard.tablist_label.descript") },
			{ prop: "createTime", label: proxy?.$t("dashboard.tablist_label.create_time") },
			{ prop: "operation", label: proxy?.$t("dashboard.tablist_label.operation"), fixed: "right", width: 130 }
		];
		const proTable = ref<any>();
		const more = ref(false);
		return () => {
			return (
				<div class="applet-dashboard">
					<BaseSearchForm class="mb-2">
						<el-form
							class="flex pt-4 pl-4 pr-4 bg-white"
							style="flex-wrap: wrap;"
							onKeyup={(e: KeyboardEvent) => (e.keyCode == 13 ? proTable.value.getTableList() : null)}
						>
							<el-form-item class="search-item" label={proxy?.$t("dashboard.form_label.app_type")}>
								<SearchTypes v-model={initParam.appType} dataList={appletTypeList.value} />
							</el-form-item>
							<el-form-item class="search-item">
								<el-link
									type="primary"
									underline={false}
									onClick={() => {
										more.value = !more.value;
									}}
								>
									{proxy?.$t("tabs.more")}
								</el-link>
							</el-form-item>
							{more.value ? (
								<el-form-item class="search-item">
									<el-input v-model={initParam.name} placeholder={proxy?.$t("dashboard.placeholder.name")}></el-input>
								</el-form-item>
							) : null}
						</el-form>
					</BaseSearchForm>
					<ProTable
						class="table-dense"
						showSearch={false}
						showHeader={false}
						ref={proTable}
						title={buttonsList.value.length ? "" : proxy?.$t("dashboard.tab_title.manage")}
						columns={columns}
						noList
						requestApi={getTableList}
						initParam={initParam}
						dataCallback={dataCallback}
						searchCol={5}
						toolbar={["grid"]}
						viewType="grid"
						gridSpan={6}
					>
						{{
							cardBody: (scope: any) => {
								return (
									<div class="applet-card h-full flex flex-col">
										<div class="flex-1">
											<el-image
												style="height:100%;width:100%"
												src={scope.row.logo ? `${filePrefix()}${scope.row.logo}` : AppletLogo}
												fit="fill"
											></el-image>
										</div>
										<div class="flex w-full justify-between bg-white ">
											<div class="font-semibold title">{scope.row.name || ""}</div>
											{/* <div class="title">{scope.row.name || ""}</div> */}
										</div>
										<div class="applet-container">
											<div class="goto-btn">
												<el-button
													type="primary"
													onClick={() => {
														gotoAccess(scope.row);
													}}
												>
													{proxy?.$t("dashboard.btn.open_app")}
													<i class="iconfont iconarrow-right ml-2" style="font-size:14px" />
												</el-button>
											</div>
										</div>
									</div>
								);
							},
							empty: () => {
								return (
									<Empty
										class="text-left leading-6"
										subtitle={proxy?.$t("dashboard.empty.subtitle")}
										title={proxy?.$t("dashboard.empty.title")}
										btnText={proxy?.$t("dashboard.empty.btn_text")}
										showButton={false}
									/>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
